import React from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native';

/**
 * CardInfo 组件用于显示卡片信息，通常用于列表展示。
 * 
 * @param {Object} props - 组件的属性对象。
 * @param {Object} [props.item={}] - 包含卡片信息的对象，如标题、作者、日期、节选等。
 * @param {string} [props.id] - 卡片的唯一标识。
 * 
 * @returns {JSX.Element} - 渲染的卡片信息组件。
 * 
 * @注意事项
 * - `item` 对象需包含 `title`、`author`、`date`、`excerpt` 和 `image` 等属性，否则会显示默认值。
 * - 确保 `item.image` 为有效的图片链接，否则图片将无法显示。
 */
const CardInfo = ({ item = {}, id }) => {
    console.log('item', item);
    if (!item || Object.keys(item).length === 0) {
        return null;
    }
    return (
        <TouchableOpacity
            style={styles.cardContainer}
            activeOpacity={0.9}
        >
            <Image
                source={{ uri: item.image || '' }}
                style={styles.cardImage}
                resizeMode="cover"
            />

            <View style={styles.cardContent}>
                <Text style={styles.title} numberOfLines={2} ellipsizeMode="tail">
                    {item.title || '无标题'}
                </Text>
                <View style={styles.metaData}>
                    <Text style={styles.author}>{item.author || '无作者'}</Text>
                    <Text style={styles.date}>{item.date || '空'}</Text>
                </View>
                <Text style={styles.excerpt} numberOfLines={3} ellipsizeMode="tail">
                    {item.excerpt || '无节选'}
                </Text>
            </View>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    cardContainer: {
        backgroundColor: 'white',
        borderRadius: 12,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 8,
        elevation: 3,
        marginBottom: 20,
        overflow: 'hidden',
    },
    cardImage: {
        width: '100%',
        height: 180,
    },
    cardContent: {
        padding: 16,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 8,
        color: '#222',
    },
    metaData: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 10,
    },
    author: {
        fontSize: 14,
        color: '#666',
    },
    date: {
        fontSize: 14,
        color: '#999',
    },
    excerpt: {
        fontSize: 15,
        color: '#555',
        lineHeight: 22,
    },
});

export default CardInfo;    